<template>
    <div class="cp-header">
        <div class="cp-main-box">
            <a href="/" class="cp-logo">
                <!-- 主页logo -->
                <img src="../../public/img/logo.png">
            </a>
            <div class="layui-nav headerRight"  lay-filter="">
                <!-- 搜索框 -->
                <div class="cp-header-search">
                    <input @keyup="search" placeholder="可以搜索书名、作者哦！" v-model="searchContent">
                    <a href="javascript:" class="iconfont icon-search"></a>
                </div>
                <div class="cp-header-link">
                    <!-- 跳转充值页面 -->
                    <a href="Usercharge/recharge">充值</a>
                </div>
                <div class="cp-header-user" v-show="!logged">
                    <a href="/register">注册</a>
                    <span></span>
                    <a href="" @click.prevent="loginDialogVisible = true">登录</a>
                </div>
                <div class="layui-nav-item" v-show="logged">
                    <!-- 跳转用户个人中心 -->
                    <a href="/user">
                        <i class="iconfont icon-dengpao"></i>
                         <img src="/img/default_head.png" class="layui-nav-img header">
                        <!-- 用户名 -->
                        <span class="userName cp-ellipsis" v-text="userName"></span>
                        <!-- 更多 -->
                        <span class="layui-nav-more"></span>
                    </a>

                    <dl class="layui-nav-child" id="userMsgChild">
                        <dd>
                            <a href="javascript:;">
                                <i class="iconfont icon-tuichu"></i>
                                退出
                            </a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <!-- 模态框 -->
        <el-dialog title="用户登录" width="20%" :visible.sync="loginDialogVisible">
            <el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
                <el-form-item prop="tel">
                    <el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="singIn">立即登录</el-button>
                </el-form-item>
            </el-form>  
        </el-dialog>
    </div>
</template>
<script src="../assets/js/layui.js"></script>
<script>	
import $ from 'jquery'
export default {
    name: "Header",
    data() {
        return {
            // 登录模态框可见
            loginDialogVisible: false,
            // 登录表单
            loginForm: {
                userTel: "",
                password: ""
            },
            // 搜索内容
            searchContent: ""
        }
    },
    mounted() {
        layui.use('element');
    },
    computed: {
        // 登录状态
        logged: function () {
            return (this.userName != null);
        },
        // 用户名
        userName: function () {
            return sessionStorage.getItem("userName");
        }
    },
    methods: {
        // 搜索
        search() {

        },
        // 登录
        singIn() {
            let _this = this;
            $.ajax({
                url: "http://localhost/user/login",
                type: "POST",
                data: _this.loginForm,
                success: function (res) {
                    // 判断响应码
                    if (res.code != 200) {
                        // 错误提示信息
                        _this.$message.error(res.message);
                        return;
                    }
                    // 登录成功提示信息
                    _this.$message.success("登录成功");
                    // 关闭模态框
                    _this.loginDialogVisible = false;
                    // 将返回数据存入session
                    sessionStorage.setItem("userId", res.data.userId);
                    sessionStorage.setItem("userName", res.data.userName);
                    // 存入作者Id
                    if (res.data.authorId != null) {
                        sessionStorage.setItem("authorId", res.data.authorId);
                    }
                    // 刷新
                    window.reload();
                }
            });
        }
    }
}
</script>
<style scoped>
    .el-button {
        background-color:#51c29a;
        border: #51c29a 1px solid;
        width: 100%;
        border-radius: 3px;
    }
    .el-button:hover {
        background-color:#7adbbb;
        border: #7adbbb solid 1px;
    }
    .loginBoxTitle {
        bottom: 20px;
    }

</style>